// vue插件定义
// 扩展vue原有的功能：全局组件，自定义指令，挂载原型方法，注意：没有全局过滤器。
// 这就是插件
// vue2.0插件写法要素：导出一个对象，有install函数，默认传入了Vue构造函数，Vue基础之上扩展
// vue3.0插件写法要素：导出一个对象，有install函数，默认传入了app应用实例，app基础之上扩展

// import XtxSkeleton from './xtx-skeleton.vue'
// import XtxCarousel from './xtx-carousel.vue'
// import XtxMore from './xtx-more.vue'
// import XtxBread from './xtx-bread.vue'
// import XtxBreadItem from './xtx-bread-item.vue'
import defaultImg from '@/assets/images/200.png'
const importFn = require.context('./',false,/\.vue$/)
console.log(importFn.keys());
// 挂载全局组件意味着在应用程序中，该插件提供的组件可以在任何地方使用，而不需要在每个组件都内联定义。
// 你只需要在main.js中注册该插件，并将其作为参数传递即可。
export default {
    install(app){
    // 在app上进行扩展，app提供 component directive 函数
    // 如果要挂载原型 app.config.globalProperties 方式
        // app.component(XtxSkeleton.name,XtxSkeleton)
        // // 轮播图组件挂载成全局组件
        // app.component(XtxCarousel.name,XtxCarousel)
        // // 查看全部注册
        // app.component(XtxMore.name,XtxMore)
        // // 注册面包屑
        // app.component(XtxBread.name,XtxBread)
        // app.component(XtxBreadItem.name,XtxBreadItem)
    //    遍历每一个path
        importFn.keys().forEach(path => {
            // 定义一个变量存储importFn中的每一个path
            const component = importFn(path).default
            // 注册
            app.component(component.name,component)
        });
        // 自定义指令  实现图片懒加载
        defineDirective(app)
        // 挂载
        
    }
}

const defineDirective = (app) => {
    // app.config.globalProperties.$message = Message// 原型函数
// 自定义指令,自定义指令的名字与指令什么时候生效
    app.directive('lazy',{
        mounted(el,binding){
            // 观察者
            const observe = new IntersectionObserver(([{isIntersecting}])=>{
                // 判断是否进入可视区
                if(isIntersecting){
                    observe.unobserve(el)
                    // 把传过来的值给el.src
                    el.src = binding.value
                    // 处理错误
                    el.onerror=()=>{
                        el.src = defaultImg
                    }
                }
            },{
                threshold:0.01
            })
            // 否则继续观察
            observe.observe(el)
        }
    })
}